<template>
  <div class="app-container">
    <el-form :model="form" label-width="80px" :rules="formRules" ref="form">
      <!--整体布局-->
      <el-row :gutter="20">
        <!--左侧布局-->
        <el-col :span="18">
          <!--全部类型--标题-->
          <el-row :gutter="0">
            <el-col :span="24">
              <el-form-item prop="articleTitle" label="标题">
                <el-input placeholder="请输入文章来源标题" v-model="form.articleTitle" class="filter-item" auto-complete="off"/>
              </el-form-item>
            </el-col>
          </el-row>
          <!--文章类型--作者、编辑、来源、标签-->
          <div v-if="pageData.routerType == 1 || pageData.routerType == 3">
            <el-row :gutter="0">
              <el-col :span="6">
                <el-form-item prop="articleAuthor" label="作者">
                  <el-input placeholder="请输入文章来源作者" v-model="form.articleAuthor" class="filter-item" auto-complete="off"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="articleEditor" label="编辑">
                  <el-input placeholder="请输入文章来源编辑" v-model="form.articleEditor" class="filter-item" auto-complete="off"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="articleSource" label="来源">
                  <el-input placeholder="请输入文章来源" v-model="form.articleSource" class="filter-item" auto-complete="off"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="articleLabel" label="标签">
                  <el-input placeholder="请输入文章标签组" v-model="form.articleLabel" class="filter-item" auto-complete="off"/>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!--全部类型--创建时间、发布时间/文章类型--关键字-->
          <el-row :gutter="0">
            <el-col :span="8">
              <el-form-item prop="articleCreateTime" label="创建时间">
                <el-date-picker v-model="form.articleCreateTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="articleReleaseTime" label="发布时间">
                <el-date-picker v-model="form.articleReleaseTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
              </el-form-item>
            </el-col>
            <div v-if="pageData.routerType == 1">
              <!--文案关键字输入框-->
              <el-col :span="8">
                <el-form-item prop="articleKeyword" label="关键字">
                  <el-input placeholder="请输入关键字，多个关键字之间逗号分隔" v-model="form.articleKeyword" class="filter-item" auto-complete="off"/>
                </el-form-item>
              </el-col>
            </div>
          </el-row>
          <!--全部类型--所属一级板块、二级板块、数据类型-->
          <el-row :gutter="0">
            <el-col :span="8">
              <el-form-item prop="articleClassId" label="发布板块">
                <el-select v-model="form.articleClassId" filterable placeholder="请选择" @change="handleSearchClass">
                  <el-option v-for="item in pageData.articleClassList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="articleClassType" label="二级板块">
                <el-select v-model="form.articleClassType" filterable placeholder="请选择" :disabled="pageData.articleClassTypeStatus" @change="handleSearchClassType">
                  <el-option v-for="item in pageData.articleClassTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="0">
            <el-col :span="24">
              <el-form-item prop="articleType" label="文案类型">
                <el-radio-group v-model="form.articleType" @change="handleSearchType">
                  <div v-if="pageData.routerType == 1">
                    <el-radio :label="1" :disabled="pageData.textStatus">文字</el-radio>
                    <el-radio :label="10" :disabled="pageData.atlasStatus">图集</el-radio>
                    <el-radio :label="2" :disabled="pageData.audioTextStatus">音频</el-radio>
                  </div>
                  <div v-if="pageData.routerType == 2">
                    <el-radio :label="9" :disabled="pageData.audioStatus">音频</el-radio>
                  </div>
                  <div v-if="pageData.routerType == 3">
                    <el-radio :label="3" :disabled="pageData.subjectStatus">视频专题</el-radio>
                    <el-radio :label="4" :disabled="pageData.boutiqueVideoStatus">精品课程</el-radio>
                    <el-radio :label="23" :disabled="pageData.boutiqueAudioStatus">精品音频</el-radio>
                    <el-radio :label="6" :disabled="pageData.playBackStatus">研修回放</el-radio>
                    <el-radio :label="7" :disabled="pageData.meetingStatus">会议现场</el-radio>
                    <el-radio :label="8" :disabled="pageData.interviewStatus">视频采访</el-radio>
                    <el-radio :label="87" :disabled="pageData.onlineStatus">影音类型</el-radio>
                  </div>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <!--全部类型--发布状态、过期状态、付费状态-->
          <el-row :gutter="0">
            <el-col :span="6">
              <el-form-item prop="articleStatus" label="发布状态">
                <el-radio v-model="form.articleStatus" :label="0">预设</el-radio>
                <el-radio v-model="form.articleStatus" :label="1">发布</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="articleOverdueStatus" label="过期状态">
                <el-radio v-model="form.articleOverdueStatus" :label="1">已过期</el-radio>
                <el-radio v-model="form.articleOverdueStatus" :label="0">未过期</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="articleIsVip" label="付费状态">
                <el-radio v-model="form.articleIsVip" :label="1">开启</el-radio>
                <el-radio v-model="form.articleIsVip" :label="0">不开启</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="articleIsHome" label="首页推送">
                <el-radio v-model="form.articleIsHome" :label="1">自动</el-radio>
                <el-radio v-model="form.articleIsHome" :label="0">手动</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <!--全部类型--简介-->
          <el-row :gutter="0">
            <el-col :span="24">
              <el-form-item prop="articleIntroduction" label="简介">
                <el-input placeholder="请输入文章简介内容" v-model="form.articleIntroduction" class="filter-item" auto-complete="off" type="textarea" :rows="9"/>
              </el-form-item>
            </el-col>
          </el-row>
          <!--视频类型--排版简介-->
          <div v-if="pageData.routerType == 3">
            <el-row :gutter="0">
              <el-col :span="24">
                <el-form-item prop="articleIntroductionHtml" label="简介">
                  <el-input placeholder="请输入文章简介内容" v-model="form.articleIntroductionHtml" class="filter-item" auto-complete="off" type="textarea" :rows="9"/>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="6">
          <!--首页图-->
          <div v-if="pageData.routerType == 1 || pageData.routerType == 3">
            <el-row :gutter="0">
              <el-col :span="24">
                <el-form-item label="首屏图">
                  <el-upload
                    class="avatar-uploader"
                    action="/api/cms/common/uploadFile"
                    :show-file-list="false"
                    :on-success="handleHomeImageUploadSuccess">
                    <img v-if="form.articleHomeImage" :src="form.articleHomeImage" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 178px"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!--展示图/列表图-->
          <div v-if="pageData.routerType == 2 || pageData.routerType == 3">
            <el-row :gutter="0">
              <el-col :span="24">
                <el-form-item label="展示图">
                  <el-upload
                    class="avatar-uploader"
                    action="/api/cms/common/uploadFile"
                    :show-file-list="false"
                    :on-success="handleDisplayImageUploadSuccess">
                    <img v-if="form.articleDisplayImage" :src="form.articleDisplayImage" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 178px"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!--底层图/预播图-->
          <div v-if="pageData.routerType == 3">
            <el-row :gutter="0">
              <el-col :span="24">
                <el-form-item label="底层图">
                  <el-upload
                    class="avatar-uploader"
                    action="/api/cms/common/uploadFile"
                    :show-file-list="false"
                    :on-success="handleArticleImageUploadSuccess">
                    <img v-if="form.articleImage" :src="form.articleImage" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 178px"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!--图集上传按钮、音频上传按钮-->
          <div v-if="pageData.routerType == 1 || pageData.routerType == 2">
            <div v-if="pageData.routerType !== 2">
              <el-row :gutter="0">
                <el-col :span="24">
                  <el-form-item prop="articlePictureList" label="图集列表">
                    <el-upload
                      class="upload-demo"
                      action="/api/cms/common/uploadFile"
                      :on-success="handlePictureUploadSuccess"
                      :file-list="form.articlePictureList"
                      list-type="picture">
                      <el-button size="small" type="primary" :disabled="form.articleType != 10">图集上传</el-button>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <el-row :gutter="0">
              <el-col :span="24">
                <el-form-item prop="articleAudioList" label="音频文件">
                  <el-upload
                    class="upload-demo"
                    action="/api/cms/common/uploadFile"
                    :on-success="handleAudioUploadSuccess"
                    :before-upload="handleAudioUploadBefore"
                    :file-list="form.articleAudioList"
                    list-type="picture">
                    <el-button size="small" type="primary" :disabled="form.articleType != 2 && form.articleType != 9">音频上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 期数 -->
          <div v-if="pageData.routerType == 2">
            <el-row :gutter="0">
              <el-col :span="24">
                <el-form-item prop="articlePeriodsNumber" label="期数">
                  <el-input placeholder="如包含音频文件，请输入音频播放地址" v-model="form.articlePeriodsNumber" class="filter-item" auto-complete="off" :disabled="pageData.routerType !== 2"/>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 音频地址 -->
          <div v-if="pageData.routerType == 1 || pageData.routerType == 2">
            <el-row :gutter="0">
              <el-col :span="24">
                <el-form-item prop="articleAudio" label="音频地址">
                  <el-input placeholder="如包含音频文件，请输入音频播放地址" v-model="form.articleAudio" class="filter-item" auto-complete="off" :disabled="form.articleType !== 2 && form.articleType !== 9"/>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 视频地址、视频时长 -->
          <div v-if="pageData.routerType == 3">
            <el-row :gutter="0">
              <el-col :span="24">
                <el-form-item prop="articleCcVideoPlayUrl" label="视频地址">
                  <el-input placeholder="如包含视频文件，请输入视频播放地址" v-model="form.articleCcVideoPlayUrl" class="filter-item" auto-complete="off" :disabled="pageData.routerType !== 3"/>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 音视频时长 -->
          <el-row :gutter="0">
            <el-col :span="24">
              <el-form-item prop="articleAudioTime" label="播放时长">
                <el-input placeholder="请输入播放时长" v-model="form.articleAudioTime" class="filter-item" auto-complete="off" :disabled="form.articleType !== 2 && form.articleType !== 9 && pageData.routerType !== 3"/>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 价格 -->
          <el-row :gutter="0">
            <el-col :span="24">
              <el-form-item prop="articlePrice" label="付费价格">
                <el-input placeholder="如为付费状态，请输入付费价格" v-model="form.articlePrice" class="filter-item" auto-complete="off" :disabled="form.articleIsVip === 0"/>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 展示顺序 -->
          <el-row :gutter="0">
            <el-col :span="24">
              <el-form-item prop="articleHomeIndex" label="首页顺序">
                <el-input placeholder="如需推送首页，请输入首页排序" v-model="form.articleHomeIndex" class="filter-item" auto-complete="off" :disabled="form.articleIsHome === 0"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!--编辑器-->
      <el-row :gutter="0">
        <el-col :span="24">
          <vue-ueditor-wrap v-model="form.articleContent" :config="pageData.editorConfig"></vue-ueditor-wrap>
        </el-col>
      </el-row>
    </el-form>
    <div style="margin-top: 20px">
      <el-button type="primary" :loading="pageData.loading" @click.native.prevent="handleSaveButtonClick('form')">发布文案</el-button>
    </div>
  </div>
</template>

<script>
  // 组件引入
  // 方法工具引入
  import { PermissionsToDetectFormUser } from '@/utils/PermissionsDetect';
  import { getPermission,getName } from '@/utils/UserCookies';
  // 接口引入
  import { loadCmsProgramSearchList,saveCmsArticleData,loadCmsProgramData } from "@/api/content";
  export default {
    name: "save",
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data (){
      return {
        pageData:{
          routerType: 0,// 1、文章2、音频3、视频
          uploadAction: "",
          loading: false,
          articleClassList: [],// 一级板块
          articleClassTypeStatus: true,// 二级板块可用状态
          articleClassTypeList: [
            {label: '请选择', value: -1}
          ],// 二级板块
          textStatus: true,// 文章类--文字
          atlasStatus: true,// 文章类--图集
          audioTextStatus: true,// 文章类--音频
          audioStatus: true,// 音频类--音频
          subjectStatus: true,// 视频类--专区视频
          boutiqueVideoStatus: true,// 视频类--精品视频
          boutiqueAudioStatus: true,// 视频类--精品音频
          playBackStatus: true,// 视频类--研修回放
          meetingStatus: true,// 视频类--会议现场
          interviewStatus: true,// 视频类--视频采访
          onlineStatus: true,// 视频类--影音专区
          editorConfig: {
            autoHeightEnabled: false,// 编辑器不自动被内容撑高
            initialFrameHeight: 240,// 初始容器高度
            initialFrameWidth: '100%'// 初始容器宽度
          },// 编辑器配置
        },// 页面配置数据
        form:{
          articleTitle: "",
          articleClassId: -1,
          articleClassType: -1,
          articleType: -1,
          articleIsVip: 0,
          articlePrice: 0,
          articleCreateTime: new Date(),
          articleReleaseTime: new Date(),
          articleAuthor: "",
          articleEditor: getName(),
          articleSource: "易采通APP",
          articlePeriodsNumber: 0,// 期数
          articleStatus: 1,
          articleOverdueStatus: 0,
          articleDisplayImage: "",// 展示图
          articleHomeImage: "",
          articleIntroduction: "",
          articleIntroductionHtml: "",

          articleImage: "",// 预播图
          articleAudio: "",// 音视频播放地址
          articleAudioTime: "",// 音视频播放时长
          articleAudioList: [],// 音频列表(不参与表单)
          articleCcVideoPlayUrl: "",// 视频播放地址CC
          articleContent: "",

          articleKeyword: "",

          articleLabel: "25,26,27",

          articlePicture: [],// 图集列表
          articlePictureList: [],// 图集列表(不参与表单)

          articleIsHome: 0,// 是否进行首页推送
          articleHomeIndex: 0,

          articleIsPush: 0,// 是否进行push推送(预设表单)
        },// 页面表单
        formRules: {
          // 必填项验证
          articleTitle: [{ required: true, validator:(rule, value, callback) => {
                if (value === ''){
                  this.$message.warning("请输入标题");
                  callback(new Error("请输入标题"));
                } else {
                  callback();
                }
              },trigger: "blur" }],// 标题
          articleLabel: [{ required: true, validator:(rule, value, callback) => {
                if (value === ''){
                  this.$message.warning("请输入文章标签组");
                  callback(new Error("请输入文章标签组"));
                } else {
                  callback();
                }
              },trigger: "blur" }],// 标签
          articleIntroduction: [{ validator:(rule, value, callback) => {
              if ((this.pageData.routerType === 1 || this.pageData.routerType === 3) && value === ''){
                this.$message.warning("请输入文本简介");
                callback(new Error("请输入文本简介"));
              } else {
                callback();
              }
            },trigger: "blur" }],// 简介
          articleIntroductionHtml: [{ validator:(rule, value, callback) => {
              if (this.pageData.routerType === 3 && value === ''){
                this.$message.warning("请输入排版简介");
                callback(new Error("请输入排版简介"));
              } else {
                callback();
              }
            },trigger: "blur" }],// 排版简介
          // 特殊验证
          articleClassId: [{ required: true, validator:(rule, value, callback) => {
                if (value === -1){
                  this.$message.warning("请选择该内容对应的板块");
                  callback(new Error("请选择该内容对应的板块"));
                } else {
                  callback();
                }
              },trigger: "blur" }],// 一级板块
          articleClassType: [{ validator:(rule, value, callback) => {
              // 法律类型
              if ((this.form.articleClassId === 2 || this.form.articleClassId === 4) && value === -1){
                this.$message.warning("请选择该内容对应的二级板块");
                callback(new Error("请选择该内容对应的二级板块"));
              } else {
                callback();
              }
            },trigger: "blur" }],// 二级板块
          articlePrice: [{ validator:(rule, value, callback) => {
              if (this.form.articleIsVip === 1) {
                if (this.form.articleClassId !== 2 || this.form.articleType !== 4) {
                  if (!(/^[1-9]\d*$/.test(value))) {
                    this.$message.warning("商品价格不可为空，请填写正确的商品价格");
                    callback(new Error("商品价格不可为空，请填写正确的商品价格"));
                  } else {
                    callback();
                  }
                } else {
                  callback();
                }
              } else {
                callback();
              }
              },trigger: "blur" }],// 付费价格判定
          articleHomeIndex: [{ validator:(rule, value, callback) => {
                if (this.form.articleIsHome === 1 && !(/^[1-9]\d*$/.test(value))){
                  this.$message.warning("展示顺序不可为空，请填写正确的展示顺序");
                  callback(new Error("展示顺序不可为空，请填写正确的展示顺序"));
                } else {
                  callback();
                }
              },trigger: "blur" }],// 首页推送判定
          articleAudio: [{ validator:(rule, value, callback) => {
                if ((this.form.articleType === 2 || this.form.articleType === 9) && value === ""){
                  this.$message.warning("请填写或上传所发布内容的音频地址");
                  callback(new Error("请填写或上传所发布内容的音频地址"));
                } else {
                  callback();
                }
              },trigger: "blur" }],// 音频文件判定
          articleAudioTime: [{ validator:(rule, value, callback) => {
                if ((this.form.articleType === 2 || this.form.articleType === 9) && value === ""){
                  this.$message.warning("请填写所上传音频的播放时长");
                  callback(new Error("请填写所上传音频的播放时长"));
                } else {
                  callback();
                }
              },trigger: "blur" }],// 音频时长判定
          articleCcVideoPlayUrl: [{ validator:(rule, value, callback) => {
                if ((this.pageData.routerType === 3) && value === ""){
                  this.$message.warning("请填写或上传所发布内容的视频地址");
                  callback(new Error("请填写或上传所发布内容的视频地址"));
                } else {
                  callback();
                }
              },trigger: "blur" }],// 视频播放地址
          articlePictureList: [{ validator:(rule, value, callback) => {
                if (this.form.articleType === 10 && value.length === 0){
                  this.$message.warning("请上传所发布内容的图集内容");
                  callback(new Error("请上传所发布内容的图集内容"));
                } else {
                  callback();
                }
              },trigger: "blur" }]// 图集列表判定
        },// 表单验证
        responseData: {},// 接口响应数据
      }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      // 事件函数
      handleSearchClass(){
        // 首先关闭所有的数据类型筛选项
        this.pageData.textStatus = true;
        this.pageData.atlasStatus = true;
        this.pageData.audioTextStatus = true;
        this.pageData.audioStatus = true;
        this.pageData.subjectStatus = true;
        this.pageData.boutiqueVideoStatus = true;
        this.pageData.boutiqueAudioStatus = true;
        this.pageData.playBackStatus = true;
        this.pageData.meetingStatus = true;
        this.pageData.interviewStatus = true;
        this.pageData.onlineStatus = true;
        // 关闭二级分类可选状态
        this.pageData.articleClassTypeStatus = true;
        // 重置二级分类默认值
        this.form.articleClassType = -1;
        // 重置三级分类默认值
        this.form.articleType = -1;
        // 判别一级板块筛选项进行后续逻辑控制
        switch (this.form.articleClassId) {
          case 1:// 案例
            this.form.articleType = 1;// 设置三级分类默认值
            this.pageData.textStatus = false;// 打开文字类型可选状态
            this.pageData.atlasStatus = false;// 打开图集类型可选状态
            this.pageData.audioTextStatus = false;// 打开文字+音频类型可选状态
            break;
          case 4:// 法律
            this.form.articleType = 1;// 设置三级分类默认值
            this.pageData.textStatus = false;// 打开文字类型可选状态
            this.pageData.articleClassTypeStatus = false;// 案例类型没有二级分类关闭二级分类可选状态
            break;
          case 88:// 新闻
            this.form.articleType = 1;// 设置三级分类默认值
            this.pageData.textStatus = false;// 打开文字类型可选状态
            this.pageData.atlasStatus = false;// 打开图集类型可选状态
            this.pageData.audioTextStatus = false;// 打开文字+音频类型可选状态
            break;
          case 5:// 亚利聊政采
            this.form.articleType = 9;// 设置三级分类默认值
            this.pageData.audioStatus = false;// 打开文字+音频类型可选状态
            break;
          case 89:// 政采之声
            this.form.articleType = 9;// 设置三级分类默认值
            this.pageData.audioStatus = false;// 打开文字+音频类型可选状态
            break;
          case 2:// 视频课堂
            this.form.articleType = 3;// 设置三级分类默认值
            this.pageData.subjectStatus = false;
            this.pageData.boutiqueVideoStatus = false;
            this.pageData.boutiqueAudioStatus = false;
            this.pageData.articleClassTypeStatus = false;// 案例类型没有二级分类关闭二级分类可选状态
            let param = {searchType: 3};
            this.loadCmsProgramSearchList(param);
            // 获取二级可用列表数据
            break;
          case 3:// 研修直播
            this.form.articleType = 6;// 设置三级分类默认值
            this.pageData.playBackStatus = false;
            this.pageData.meetingStatus = false;
            this.pageData.interviewStatus = false;
            break;
          case 87:// 影视大咖
            this.form.articleType = 87;// 设置三级分类默认值
            this.pageData.onlineStatus = false;
            this.pageData.interviewStatus = false;
            this.pageData.articleClassTypeStatus = false;// 案例类型没有二级分类关闭二级分类可选状态
            let param2 = {searchType: 7};
            this.loadCmsProgramSearchList(param2);
            break;
        }
      },// 选择一级板块
      handleSearchClassType(){
        if (this.form.articleClassId == 2 || this.form.articleClassId == 3 || this.form.articleClassId == 87){
          if (this.form.articleClassType != -1){
            this.loadCmsProgramData(this.form.articleClassType);
          }
        }
      },// 筛选二级板块(仅仅处理影像大咖图片)
      handleSearchType(){
        if (this.form.articleClassId === 2){
          this.form.articleClassType = -1;
          let param = {searchType: this.form.articleType};
          this.loadCmsProgramSearchList(param);
        }
      },// 选择三级分类板块
      handleHomeImageUploadSuccess(response){
        this.form.articleHomeImage = response.data;
      },// 文章首页图上传成功
      handleDisplayImageUploadSuccess(response){
        this.form.articleDisplayImage = response.data;
      },// 文章展示图上传成功
      handleArticleImageUploadSuccess(response){
        this.form.articleImage = response.data;
      },// 文章底层图上传成功
      handlePictureUploadSuccess( response){
        // 将上传成功的数据推送到列表中进行展示
        let image = {name: response.data, url: response.data};
        this.form.articlePictureList.push(image);
        // 将已上传的列表URL填充到表单数据中
        let images = [];
        for (let i=0; i<this.form.articlePictureList.length; i++ ){
          images.push(this.form.articlePictureList[i].url);
        }
        this.form.articlePicture = images.toString();
      },// 图集上传成功
      handleAudioUploadBefore(file){
        //获取时长
        var content = file;
        var url = URL.createObjectURL(content)
        //经测试，发现audio也可获取视频的时长
        var audioElement = new Audio(url)
        let _this= this;
        audioElement.addEventListener("loadedmetadata", function (_event) {
          var duration = audioElement.duration;
          var temp = parseInt(duration);
          if (temp >= 3600){
            // 小时
            var hour = temp / 3600;
            var minute = temp - (3600 * hour) / 60;
            var second = temp % 3600;
            _this.form.articleAudioTime = hour+":"+minute+":"+second;
          } else if (temp < 60) {
            // 秒
            _this.form.articleAudioTime = "00:"+temp;
          } else {
            // 分钟
            var minute = temp / 60;
            var second = temp % 60;
            _this.form.articleAudioTime = minute+":"+second;
          }

        });
      },// 上传之前的监听
      handleAudioUploadSuccess(response){
        // 将现有列表清空，并将最新上传的数据推送到列表中进行展示
        this.form.articleAudioList = [];
        let audio = {name: response.data, url: response.data};
        this.form.articleAudioList.push(audio);
        // 将最新上传的数据推送到表单数据中
        this.form.articleAudio = audio.url;
      },// 音频上传成功
      handleSaveButtonClick(formName){
        this.$refs[formName].validate((valid) => {
          this.pageData.loading = true;
          if (valid) {
            let result = true;
            if (this.pageData.routerType === 1 && !PermissionsToDetectFormUser(getPermission(), "400001")) {
              this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
              this.pageData.loading = false;
              result = false;
            }
            if (this.pageData.routerType === 2 && !PermissionsToDetectFormUser(getPermission(), "410001")) {
              this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
              this.pageData.loading = false;
              result = false;
            }
            if (this.pageData.routerType === 3 && !PermissionsToDetectFormUser(getPermission(), "420001")) {
              this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
              this.pageData.loading = false;
              result = false;
            }
            if (result){
              this.$confirm('此操作将会保存当前数据, 请核对后继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                // 创建时间转换
                if (this.form.articleCreateTime !== ''){
                  let date1 = new Date(this.form.articleCreateTime);
                  this.form.articleCreateTime = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate() + ' ' + date1.getHours() + ':' + date1.getMinutes() + ':' + date1.getSeconds();
                }
                // 发布时间转换
                if (this.form.articleReleaseTime !== ''){
                  let date2 = new Date(this.form.articleReleaseTime);
                  this.form.articleReleaseTime = date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate() + ' ' + date2.getHours() + ':' + date2.getMinutes() + ':' + date2.getSeconds();
                }
                this.saveCmsArticleData();
              }).catch((cancel) => {
                console.log(cancel);
                this.$message.info("已取消操作");
                this.pageData.loading = false;
              });
            }
          } else {
            this.pageData.loading = false;
          }
        })
      },// 保存按钮点击事件
      // 接口
      loadCmsProgramSearchList(param){
        loadCmsProgramSearchList(param).then(response => {
          if (response.code === "200"){
            this.pageData.articleClassTypeList = response.data;
            this.pageData.articleClassTypeList.unshift({label: '请选择', value: -1})
          } else {
            this.$message.warning(response.message);
          }
        }).catch(close => {
          console.log(close);
        });
      },// 获取预设节目列表
      loadCmsProgramData(programId){
        let param = {programId: programId}
        loadCmsProgramData(param).then(response => {
          if (response.code === "200"){
            this.form.articleDisplayImage = response.data.programListImage;
            this.form.articleHomeImage = response.data.programHomeImage;
            this.form.articleImage = response.data.programContentImage;
          } else {
            this.$message.warning(response.message);
          }
        }).catch( error =>{
          console.log(error);
          this.$message.error(error);
        })
      },// 获取节目修改页数据
      saveCmsArticleData(){
        this.$set(this.form, "queryScope", this.pageData.routerType);
        saveCmsArticleData(this.form).then(response => {
          if (response.code === "200"){
            this.pageData.loading = false;
            this.$message.success("保存成功");
            if (this.pageData.routerType === 1){
              this.$jump.push({path: "/content/article"});
            }
            if (this.pageData.routerType === 2){
              this.$jump.push({path: "/content/audio"});
            }
            if (this.pageData.routerType === 3){
              this.$jump.push({path: "/content/video"});
            }
          } else {
            this.$message.warning(response.message);
          }
        }).catch(close => {
          console.log(close);
        });
      },// 保存文章数据
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created: function(){
      this.pageData.routerType = parseInt(this.$route.query.routerType);
      switch (this.pageData.routerType) {
        case 1:
          this.pageData.articleClassList = [
            {label: '请选择', value: -1},
            {label: '案例点评版块', value: 1},
            {label: '法律法规版块', value: 4},
            {label: '新闻类型版块', value: 88}
          ];
          this.pageData.articleClassTypeList = [
            {label: "请选择", value: -1},
            {label: "法律", value: 41},{label: "法规", value: 42},{label: "部门规章", value: 43},
            {label: "规范性文件", value: 44},{label: "国务院规范性文件", value: 4401},{label: "财政部规范性文件", value: 4402},
            {label: "中央部委规范性文件", value: 4403},
            {label: "国家发展和改革委员会规范性文件", value: 4404},{label: "教育部规范性文件", value: 4405},{label: "工业和信息化部规范性文件", value: 4406},
            {label: "公安部规范性文件", value: 4407},{label: "商务部规范性文件", value: 4408},{label: "交通运输部规范性文件", value: 4409},
            {label: "住房和城乡建设部规范性文件", value: 4410},
            {label: "地方法规规章", value: 45},{label: "北京市", value: 4501},{label: "天津市", value: 4502},{label: "上海市", value: 4503},
            {label: "重庆市", value: 4504},{label: "河北省", value: 4505},{label: "山西省", value: 4506},{label: "台湾地区", value: 4507},
            {label: "辽宁省", value: 4508},{label: "吉林省", value: 4509},{label: "黑龙江省", value: 4510},{label: "江苏省", value: 4511},
            {label: "浙江省", value: 4512},{label: "安徽省", value: 4513},{label: "福建省", value: 4514},{label: "江西省", value: 4515},
            {label: "山东省", value: 4516},{label: "河南省", value: 4517},{label: "湖北省", value: 4518},{label: "湖南省", value: 4519},
            {label: "广东省", value: 4520},{label: "海南省", value: 4521},{label: "四川省", value: 4522},{label: "贵州省", value: 4523},
            {label: "云南省", value: 4524},{label: "陕西省", value: 4525},{label: "甘肃省", value: 4526},{label: "青海省", value: 4527},
            {label: "内蒙古自治区", value: 4528},{label: "广西壮族自治区", value: 4529},{label: "西藏自治区", value: 4530},{label: "宁夏回族自治区", value: 4531},
            {label: "新疆维吾尔族自治区", value: 4532},{label: "香港", value: 4533},{label: "澳门", value: 4534},
            {label: "热门法规", value: 46},{label: "PPP项目", value: 4601},{label: "政府购买服务", value: 4602},
            {label: "国际规则", value: 47},{label: "世行规则", value: 4701},{label: "亚行规则", value: 4702},{label: "欧盟规则", value: 4703},
            {label: "联合国规则", value: 4704},{label: "美国规则", value: 4705},{label: "英国规则", value: 4706},{label: "日本规则", value: 4707},
            {label: "韩国规则", value: 4708},{label: "澳大利亚规则", value: 4709},{label: "加拿大规则", value: 4710}
          ];
          break;
        case 2:
          this.pageData.articleClassList = [
            {label: '请选择', value: -1},
            {label: '亚利聊政采', value: 5},
            {label: '政采之声', value: 89}
          ];
          this.form.articleDisplayImage = "http://v1.caigou2003.com/image/lzctx01.jpg";
          break;
        case 3:
          this.pageData.articleClassList = [
            {label: '请选择', value: -1},
            {label: '视频课堂', value: 2},
            {label: '研修直播', value: 3},
            {label: '影视大咖', value: 87}
          ];
          break;
      }
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>

<style scoped>

</style>
